import logo from './logo.svg';
import './App.css';
import {useState} from 'react'
import './index.css'
const count = 100
const idLogin = false
function getName() {
  return 11
}
const list = [
  {id: 1, name: 'vue'},
  {id: 2, name: 'react'},
  {id: 3, name: 'angular'},
]



// 定义组件
function Button() {
  return <button>自定义组件</button>
}


// 项目的跟组件
function App() {
  // 定义核心函数
function getArticeTem() {
  switch(articleType) {
    case 1: 
    return <div>我是无图文章</div>
    break;
    case 2: 
    return <div>我是单图文章</div>
    break;
    case 3: 
    return <div>我是三图文章</div>
    case 4: 
    return <div>我是多图文章</div>
    default: 
    return <div>无法识别文章</div>
  }
}
  // 定义文章类型
let articleType = 1
  // useState基础使用 是一个reactHook函数，它允许我们向组件添加一个状态变量，从而控制影响组件的渲染结果
  // 在recat中，状态被认为是只读的，我们应该始终替换他，而不是修改它，直接修改不能引发视图刷新
  let [usecount,setCount] = useState(0)
  // 绑定事件 传参自身和自定义
const changeArticleType = (e,num) => {
  articleType++
  // 1.用传入的新值修改count
  // 2.重新使用新的count渲染UI
  setCount(usecount+ 1)
  SetuseObject({
    ...useObject,
    name: 'xhh'
  })
  console.log(articleType,e,usecount);
}
// 修改对象状态
const [useObject,SetuseObject] = useState({name: 'jack'})
// 组件基础样式方案
  return (
    <div className="App">
      this is app
      {count}
      {getName()}
      {new Date().getDate()}
      <div style={{color: 'red'}}>this is a</div>
      <div>列表渲染</div>
      <div>
        <ul>
          { list.map(item => <li key={item.id}>{item.name}</li>)}
        </ul>
      </div>
      <div>条件渲染</div>
      <div>{idLogin && <span>jack</span>}</div>
      <div>{idLogin ? <span>jack</span> : <span>loading</span>}</div>
      <div>多条件判断</div>
      <div>{getArticeTem()}</div>
      <div onClick={(e) => changeArticleType(e,1)}>on绑定事件</div>
     <div>自定义组件</div>
     <Button/>
     <div>双向绑定</div>
     <div>{usecount}</div>
     <div>对象值的修改</div>
     <div>{useObject.name}</div>
     <div style={{color: 'red'}}>行内样式(不推荐)</div>
     <div className='foo'>class类名控制</div>
    </div>
  );
}

export default App;
